<template>
    <Modal :value="show" @on-visible-change="setVisibility" class="c-prefix" title="分配人员">
        <div v-if="tickets && tickets.length">
            <p class="margin-bottom-5">
                <b>已选工单编号:</b>
            </p>
            <Tag :key="index" class="margin-left-5 margin-right-5" color="blue" v-for="(ticket, index) in tickets">{{ticket.ticket_sn}}</Tag>
        </div>

        <Form :label-width="120" class="margin-bottom-20 margin-top-20">
            <FormItem label="工单紧急程度:" v-if="isOtherTicket">
                <RadioGroup v-model="respond_hour">
                    <p style="margin-top:-10px">
                        <Radio :label="3">
                            <span>3小时内</span>
                        </Radio>
                    </p>
                    <p>
                        <Radio :label="24">
                            <span>24小时内</span>
                        </Radio>
                    </p>
                </RadioGroup>
            </FormItem>
            <FormItem class="label-height" label="预约上门时间:" v-if="isOtherTicket">
                <span v-if="isSingleTicket">{{ tickets[0].created_at | dateAddHour(respond_hour)}}</span>
                <span v-else>工单创建时间顺延 {{respond_hour}} 小时</span>
            </FormItem>
            <FormItem>
                <span slot="label">
                    <Select @on-change="fetchEngineer" v-model="roleType">
                        <Option :value="14">师傅</Option>
                        <Option :value="13">调度</Option>
                    </Select>
                </span>
                <Select clearable filterable ref="selector" v-model="user_id">
                    <Option :key="index" :value="e.id" v-for="(e, index) in engineers[roleType]">{{e.name}} - {{e.telephone}}</Option>
                </Select>
            </FormItem>
        </Form>

        <div slot="footer">
            <Button @click="setVisibility(false)" type="text">取消</Button>
            <Button :loading="loading" @click="handleSubmit" type="primary">保存</Button>
        </div>
    </Modal>
</template>

<script>
// import dayjs from 'dayjs'
import { http, api } from '@/libs/http'

export default {
  name: 'select-engineer',
  props: {
    show: Boolean,
    tickets: Array
  },
  data () {
    return {
      roleType: 14,
      respond_hour: 3,
      engineers: {
        13: [],
        14: []
      },
      loading: false,
      user_id: 0 // 师傅id
    }
  },
  computed: {
    isSingleTicket () {
      return this.tickets && this.tickets.length === 1
    },

    isOtherTicket () {
      return this.$route.params.type !== '1'
    }
  },
  watch: {
    show (n) {
      if (!n) {
        this.roleType = 14
        this.$emit('update:ticket', null)
        this.$emit('update:tickets', null)
      } else {
        this.user_id = 0
        this.$refs.selector && this.$refs.selector.setQuery(null)
        this.fetchEngineer(14)
      }
    }
  },
  methods: {
    setVisibility (val) {
      this.$emit('update:show', val)
    },
    fetchEngineer () {
      this.$refs.selector && this.$refs.selector.setQuery(null)
      this.user_id = ''
      if (this.engineers[this.roleType].length) return
      const data = {
        offset: 0,
        limit: 10000,
        role_id: this.roleType
      }
      http.request(this, api.manager_list, null, data, (res, err) => {
        if (err) {
          this.$Message.error('获取列表失败')
        } else {
          this.engineers[this.roleType] = res.rows
        }
      })
    },
    handleSubmit () {
      if (!this.user_id) {
        this.$Message.error('请选择角色')
        return
      }
      this.loading = true
      const apiPath = this.roleType === 13 ? api.ticket_dispatch : api.ticket_alloc
      const ticket_list = this.tickets.map(item => item.id)
      const data = {
        ticket_list,
        user_id: this.user_id
      }

      // 非安装工单
      if (this.isOtherTicket) {
        data.respond_hour = this.respond_hour
      }

      http.request(this, apiPath, null, data, (res, err) => {
        this.loading = false
        if (err) return
        this.$Message.success('分配成功')
        this.setVisibility(false)
        this.$emit('refresh')
      })
    }
  }
}
</script>

<style>
.c-prefix .ivu-form .ivu-form-item-label {
    padding: 1px 10px 0 0;
}
</style>
